<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网络 - 动态列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #f0f9ff;
            --secondary: #64748b;
            --light-bg: #f8fafc;
            --border-color: #e2e8f0;
            --border-radius: 12px;
            --shadow: 0 4px 6px rgba(0,0,0,0.05);
            --hover-shadow: 0 10px 15px rgba(0,0,0,0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light-bg);
            color: #1e293b;
            line-height: 1.6;
            padding: 20px 0;
        }
        
        /* 动态发布框样式 */
        .post-create {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .post-create-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }
        
        .post-input {
            flex: 1;
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 12px 18px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .post-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .post-actions {
            display: flex;
            justify-content: space-around;
            padding-top: 10px;
        }
        
        .post-action-btn {
            display: flex;
            align-items: center;
            color: var(--secondary);
            background: none;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .post-action-btn i {
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .post-action-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 动态列表样式 */
        .posts-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .post-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .post-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--hover-shadow);
        }
        
        .post-header {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
        }
        
        .post-author {
            display: flex;
            align-items: center;
        }
        
        .author-info {
            margin-left: 12px;
        }
        
        .author-name {
            font-weight: 600;
            margin: 0 0 3px 0;
            transition: var(--transition);
        }
        
        .author-name:hover {
            color: var(--primary);
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--secondary);
            margin: 0;
        }
        
        .post-menu {
            background: none;
            border: none;
            color: var(--secondary);
            cursor: pointer;
            font-size: 1.2rem;
            padding: 5px;
            border-radius: 50%;
            transition: var(--transition);
        }
        
        .post-menu:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .post-content {
            padding: 15px 20px;
        }
        
        .post-text {
            margin: 0 0 15px 0;
            line-height: 1.6;
        }
        
        .post-media {
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .post-image {
            width: 100%;
            height: auto;
            display: block;
            transition: var(--transition);
        }
        
        .post-card:hover .post-image {
            transform: scale(1.02);
        }
        
        .post-video {
            width: 100%;
            height: auto;
            border: none;
        }
        
        .post-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
        }
        
        /* 转发内容样式 */
        .repost-container {
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            border-left: 3px solid var(--primary);
        }
        
        .repost-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: var(--secondary);
        }
        
        .repost-header i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .repost-content {
            font-size: 0.95rem;
        }
        
        /* 动态底部交互区 */
        .post-engagement {
            padding: 10px 20px;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }
        
        .engagement-stats {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
        }
        
        .stat-item i {
            margin-right: 5px;
            font-size: 0.9rem;
        }
        
        .post-interactions {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
        }
        
        .interaction-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: none;
            border: none;
            color: var(--secondary);
            padding: 10px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
            border-radius: 6px;
        }
        
        .interaction-btn i {
            margin-right: 8px;
        }
        
        .interaction-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .interaction-btn.liked {
            color: #f43f5e;
        }
        
        .interaction-btn.liked:hover {
            background-color: rgba(244, 63, 94, 0.1);
            color: #f43f5e;
        }
        
        .interaction-btn.reposted {
            color: #10b981;
        }
        
        .interaction-btn.reposted:hover {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        /* 评论区样式 */
        .post-comments {
            padding: 15px 20px;
        }
        
        .comment-item {
            display: flex;
            margin-bottom: 15px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .comment-content {
            flex: 1;
            background-color: var(--light-bg);
            border-radius: 18px;
            padding: 10px 15px;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.9rem;
            margin: 0 0 3px 0;
        }
        
        .comment-text {
            margin: 0;
            font-size: 0.9rem;
        }
        
        .comment-actions {
            display: flex;
            margin-top: 5px;
            gap: 15px;
            font-size: 0.8rem;
        }
        
        .comment-action {
            color: var(--secondary);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        /* 评论回复样式 */
        .comment-replies {
            margin-left: 48px;
            margin-top: 10px;
            padding-left: 10px;
            border-left: 2px solid var(--border-color);
        }
        
        .reply-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        /* 添加评论区 */
        .add-comment {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .comment-input {
            flex: 1;
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 8px 15px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .send-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .send-comment:hover {
            background-color: #4338ca;
            transform: scale(1.1);
        }
        
        /* 查看更多评论按钮 */
        .view-more-comments {
            color: var(--primary);
            background: none;
            border: none;
            padding: 5px 0;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        
        .view-more-comments i {
            margin-right: 5px;
        }
        
        .view-more-comments:hover {
            text-decoration: underline;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 15px 0;
            }
            
            .post-create, .post-card {
                border-radius: 10px;
            }
            
            .post-actions {
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .post-action-btn {
                flex: 1;
                justify-content: center;
                padding: 8px 5px;
                font-size: 0.85rem;
            }
            
            .interaction-btn span {
                display: none;
            }
            
            .interaction-btn i {
                margin-right: 0;
            }
            
            .engagement-stats {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .comment-replies {
                margin-left: 38px;
            }
        }
        
        @media (max-width: 576px) {
            .post-gallery {
                grid-template-columns: 1fr;
            }
            
            .post-header, .post-content, .post-engagement, .post-comments {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .user-avatar {
                width: 40px;
                height: 40px;
            }
            
            .post-action-btn i {
                margin-right: 5px;
            }
            
            .repost-container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <!-- 发布动态框 -->
                <div class="post-create">
                    <div class="post-create-header">
                        <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="user-avatar">
                        <input type="text" class="post-input" placeholder="分享你的想法...">
                    </div>
                    <div class="post-actions">
                        <button class="post-action-btn">
                            <i class="fas fa-image text-primary"></i>
                            <span>图片</span>
                        </button>
                        <button class="post-action-btn">
                            <i class="fas fa-video text-danger"></i>
                            <span>视频</span>
                        </button>
                        <button class="post-action-btn">
                            <i class="fas fa-smile text-warning"></i>
                            <span>表情</span>
                        </button>
                        <button class="post-action-btn">
                            <i class="fas fa-retweet text-success"></i>
                            <span>转发</span>
                        </button>
                    </div>
                </div>
                
                <!-- 动态列表 -->
                <div class="posts-container">
                    <!-- 纯文字动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/id/91/200/200" alt="张明的头像" class="user-avatar">
                                <div class="author-info">
                                    <h4 class="author-name">张明</h4>
                                    <p class="post-time">今天 08:45</p>
                                </div>
                            </div>
                            <button class="post-menu">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        
                        <div class="post-content">
                            <p class="post-text">早起的鸟儿有虫吃，今天也要元气满满！分享一个提高工作效率的小技巧：每天早上列出三件必须完成的事情，优先处理它们，你会发现一天下来成就感满满。#职场技巧 #正能量</p>
                        </div>
                        
                        <div class="post-engagement">
                            <div class="engagement-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>24 人点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>8 条评论</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-retweet"></i>
                                    <span>3 次转发</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-interactions">
                            <button class="interaction-btn">
                                <i class="far fa-heart"></i>
                                <span>点赞</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-retweet"></i>
                                <span>转发</span>
                            </button>
                        </div>
                        
                        <div class="post-comments">
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/26/200/200" alt="李华的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">李华</h5>
                                    <p class="comment-text">这个方法我也在用，确实很有效！特别是面对很多任务的时候，能帮助聚焦重点。</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>2小时前</span>
                                    </div>
                                    
                                    <!-- 评论回复 -->
                                    <div class="comment-replies">
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/91/200/200" alt="张明的头像" class="comment-avatar">
                                            <div class="comment-content">
                                                <h5 class="comment-author">张明 <span style="font-weight:normal; color:var(--secondary)">回复 李华</span></h5>
                                                <p class="comment-text">是的，亲测有效的方法，坚持下来收获很大！</p>
                                                <div class="comment-actions">
                                                    <a href="#" class="comment-action reply-to">回复</a>
                                                    <a href="#" class="comment-action">点赞</a>
                                                    <span>1小时前</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <button class="view-more-comments">
                                <i class="fas fa-comments"></i> 查看更多6条评论
                            </button>
                            
                            <div class="add-comment">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="comment-avatar">
                                <input type="text" class="comment-input" placeholder="添加评论...">
                                <button class="send-comment">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/id/65/200/200" alt="王芳的头像" class="user-avatar">
                                <div class="author-info">
                                    <h4 class="author-name">王芳</h4>
                                    <p class="post-time">昨天 16:30</p>
                                </div>
                            </div>
                            <button class="post-menu">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        
                        <div class="post-content">
                            <p class="post-text">周末去郊外徒步，发现了这片美丽的花海，分享给大家~ #自然风光 #周末出行</p>
                            <div class="post-media">
                                <img src="https://picsum.photos/id/15/800/600" alt="郊外的花海" class="post-image">
                            </div>
                        </div>
                        
                        <div class="post-engagement">
                            <div class="engagement-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>89 人点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>15 条评论</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-retweet"></i>
                                    <span>12 次转发</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-interactions">
                            <button class="interaction-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>已点赞</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-retweet"></i>
                                <span>转发</span>
                            </button>
                        </div>
                        
                        <div class="post-comments">
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/91/200/200" alt="张明的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">张明</h5>
                                    <p class="comment-text">太美了！请问这是在哪里呀？想去看看~</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>昨天</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/65/200/200" alt="王芳的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">王芳</h5>
                                    <p class="comment-text">@张明 这是在城郊的森林公园，最近花开得正好，快去看看吧！</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>昨天</span>
                                    </div>
                                    
                                    <!-- 评论回复 -->
                                    <div class="comment-replies">
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/91/200/200" alt="张明的头像" class="comment-avatar">
                                            <div class="comment-content">
                                                <h5 class="comment-author">张明 <span style="font-weight:normal; color:var(--secondary)">回复 王芳</span></h5>
                                                <p class="comment-text">好的，谢谢！周末就去看看</p>
                                                <div class="comment-actions">
                                                    <a href="#" class="comment-action reply-to">回复</a>
                                                    <a href="#" class="comment-action">点赞</a>
                                                    <span>昨天</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/22/200/200" alt="李强的头像" class="comment-avatar">
                                            <div class="comment-content">
                                                <h5 class="comment-author">李强 <span style="font-weight:normal; color:var(--secondary)">回复 王芳</span></h5>
                                                <p class="comment-text">这个公园我去过，确实很美，特别是这个季节！</p>
                                                <div class="comment-actions">
                                                    <a href="#" class="comment-action reply-to">回复</a>
                                                    <a href="#" class="comment-action">点赞</a>
                                                    <span>10小时前</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="add-comment">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="comment-avatar">
                                <input type="text" class="comment-input" placeholder="添加评论...">
                                <button class="send-comment">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 多图动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/id/22/200/200" alt="李强的头像" class="user-avatar">
                                <div class="author-info">
                                    <h4 class="author-name">李强</h4>
                                    <p class="post-time">3天前</p>
                                </div>
                            </div>
                            <button class="post-menu">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        
                        <div class="post-content">
                            <p class="post-text">分享一下我的新家装修成果，历时三个月终于完工了！每一个角落都是自己精心设计的，累并快乐着~ #装修日记 #家居设计</p>
                            <div class="post-media post-gallery">
                                <img src="https://picsum.photos/id/43/400/300" alt="客厅照片" class="post-image">
                                <img src="https://picsum.photos/id/42/400/300" alt="卧室照片" class="post-image">
                                <img src="https://picsum.photos/id/41/400/300" alt="厨房照片" class="post-image">
                                <img src="https://picsum.photos/id/40/400/300" alt="书房照片" class="post-image">
                            </div>
                        </div>
                        
                        <div class="post-engagement">
                            <div class="engagement-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>156 人点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>42 条评论</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-retweet"></i>
                                    <span>28 次转发</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-interactions">
                            <button class="interaction-btn">
                                <i class="far fa-heart"></i>
                                <span>点赞</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-retweet"></i>
                                <span>转发</span>
                            </button>
                        </div>
                        
                        <div class="post-comments">
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/65/200/200" alt="王芳的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">王芳</h5>
                                    <p class="comment-text">风格好喜欢！尤其是客厅的设计，简约又不失格调，求软装链接~</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>3天前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <button class="view-more-comments">
                                <i class="fas fa-comments"></i> 查看更多40条评论
                            </button>
                            
                            <div class="add-comment">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="comment-avatar">
                                <input type="text" class="comment-input" placeholder="添加评论...">
                                <button class="send-comment">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 转发的动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户的头像" class="user-avatar">
                                <div class="author-info">
                                    <h4 class="author-name">我</h4>
                                    <p class="post-time">2天前</p>
                                </div>
                            </div>
                            <button class="post-menu">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        
                        <div class="post-content">
                            <p class="post-text">非常认同这个观点，尤其是在当前的市场环境下，保持学习的热情和能力至关重要！</p>
                            
                            <!-- 转发内容 -->
                            <div class="repost-container">
                                <div class="repost-header">
                                    <i class="fas fa-retweet"></i>
                                    <span>转发自 <strong>科技前沿</strong></span>
                                </div>
                                <div class="repost-content">
                                    <p>在快速变化的时代，持续学习不再是选择，而是必需。研究表明，那些保持学习习惯的人，职业发展速度比其他人快37%，收入增长潜力高28%。#终身学习 #职业发展</p>
                                    <div class="post-media">
                                        <img src="https://picsum.photos/id/3/800/400" alt="学习与成长" class="post-image">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-engagement">
                            <div class="engagement-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>42 人点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>18 条评论</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-retweet"></i>
                                    <span>7 次转发</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-interactions">
                            <button class="interaction-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>已点赞</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="interaction-btn reposted">
                                <i class="fas fa-retweet"></i>
                                <span>已转发</span>
                            </button>
                        </div>
                        
                        <div class="post-comments">
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/91/200/200" alt="张明的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">张明</h5>
                                    <p class="comment-text">完全同意！我最近也在学习新技能，感觉收获很大</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>2天前</span>
                                    </div>
                                    
                                    <!-- 评论回复 -->
                                    <div class="comment-replies">
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/64/200/200" alt="当前用户的头像" class="comment-avatar">
                                            <div class="comment-content">
                                                <h5 class="comment-author">我 <span style="font-weight:normal; color:var(--secondary)">回复 张明</span></h5>
                                                <p class="comment-text">是的，坚持下去会看到效果的，一起加油！</p>
                                                <div class="comment-actions">
                                                    <a href="#" class="comment-action reply-to">回复</a>
                                                    <a href="#" class="comment-action">点赞</a>
                                                    <span>2天前</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="add-comment">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="comment-avatar">
                                <input type="text" class="comment-input" placeholder="添加评论...">
                                <button class="send-comment">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 转发的文章 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/id/60/200/200" alt="刘阳的头像" class="user-avatar">
                                <div class="author-info">
                                    <h4 class="author-name">刘阳</h4>
                                    <p class="post-time">4天前</p>
                                </div>
                            </div>
                            <button class="post-menu">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        
                        <div class="post-content">
                            <p class="post-text">这篇文章分析得很透彻，推荐给大家阅读，对理解当前经济形势很有帮助！</p>
                            
                            <!-- 转发的文章 -->
                            <div class="repost-container">
                                <div class="repost-header">
                                    <i class="fas fa-link"></i>
                                    <span>转发自 <strong>经济观察报</strong></span>
                                </div>
                                <div class="repost-content">
                                    <h5 style="margin-bottom:8px; font-weight:600;">后疫情时代的全球经济格局变化与机遇挑战</h5>
                                    <p style="margin-bottom:10px;">本文深入分析了后疫情时代全球经济的主要变化趋势，探讨了各行业面临的机遇与挑战，并对未来5年的经济发展方向进行了预测...</p>
                                    <div style="display:flex; align-items:center; color:var(--primary); font-size:0.9rem;">
                                        <i class="fas fa-external-link-alt mr-2"></i>
                                        <span>阅读全文</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-engagement">
                            <div class="engagement-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>97 人点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>34 条评论</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-retweet"></i>
                                    <span>56 次转发</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="post-interactions">
                            <button class="interaction-btn">
                                <i class="far fa-heart"></i>
                                <span>点赞</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="interaction-btn">
                                <i class="far fa-retweet"></i>
                                <span>转发</span>
                            </button>
                        </div>
                        
                        <div class="post-comments">
                            <div class="comment-item">
                                <img src="https://picsum.photos/id/22/200/200" alt="李强的头像" class="comment-avatar">
                                <div class="comment-content">
                                    <h5 class="comment-author">李强</h5>
                                    <p class="comment-text">这篇文章我也看了，里面关于新兴产业的分析很有见地，值得一读</p>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action reply-to">回复</a>
                                        <a href="#" class="comment-action">点赞</a>
                                        <span>4天前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <button class="view-more-comments">
                                <i class="fas fa-comments"></i> 查看更多32条评论
                            </button>
                            
                            <div class="add-comment">
                                <img src="https://picsum.photos/id/64/200/200" alt="当前用户头像" class="comment-avatar">
                                <input type="text" class="comment-input" placeholder="添加评论...">
                                <button class="send-comment">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.interaction-btn');
            likeButtons.forEach(button => {
                // 处理点赞按钮
                if (button.querySelector('.fa-heart')) {
                    button.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            this.querySelector('span').textContent = '已点赞';
                            
                            // 更新点赞数
                            const statItem = this.closest('.post-card').querySelector('.stat-item:first-child span');
                            let count = parseInt(statItem.textContent);
                            statItem.textContent = `${count + 1} 人点赞`;
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            this.querySelector('span').textContent = '点赞';
                            
                            // 更新点赞数
                            const statItem = this.closest('.post-card').querySelector('.stat-item:first-child span');
                            let count = parseInt(statItem.textContent);
                            statItem.textContent = `${count - 1} 人点赞`;
                        }
                    });
                }
                
                // 处理转发按钮
                if (button.querySelector('.fa-retweet')) {
                    button.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('reposted');
                            this.querySelector('span').textContent = '已转发';
                            
                            // 更新转发数
                            const statItem = this.closest('.post-card').querySelector('.stat-item:last-child span');
                            let count = parseInt(statItem.textContent);
                            statItem.textContent = `${count + 1} 次转发`;
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('reposted');
                            this.querySelector('span').textContent = '转发';
                            
                            // 更新转发数
                            const statItem = this.closest('.post-card').querySelector('.stat-item:last-child span');
                            let count = parseInt(statItem.textContent);
                            statItem.textContent = `${count - 1} 次转发`;
                        }
                    });
                }
            });
            
            // 评论发送功能
            const commentInputs = document.querySelectorAll('.comment-input');
            commentInputs.forEach(input => {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter' && this.value.trim() !== '') {
                        sendComment(this);
                    }
                });
                
                const sendBtn = this.nextElementSibling;
                sendBtn.addEventListener('click', () => {
                    if (this.value.trim() !== '') {
                        sendComment(this);
                    }
                });
            });
            
            // 回复功能
            const replyLinks = document.querySelectorAll('.reply-to');
            replyLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 获取被回复的用户名
                    const commentAuthor = this.closest('.comment-content').querySelector('.comment-author').textContent.split(' ')[0];
                    
                    // 获取评论区的输入框
                    const commentInput = this.closest('.post-comments').querySelector('.comment-input');
                    
                    // 在输入框中添加@用户名
                    commentInput.value = `@${commentAuthor} `;
                    commentInput.focus();
                });
            });
            
            // 查看更多评论
            const viewMoreCommentsBtns = document.querySelectorAll('.view-more-comments');
            viewMoreCommentsBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 这里可以实现加载更多评论的逻辑
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                    
                    setTimeout(() => {
                        // 模拟加载完成
                        this.style.display = 'none';
                    }, 1000);
                });
            });
            
            // 发送评论函数
            function sendComment(inputElement) {
                const commentText = inputElement.value.trim();
                if (!commentText) return;
                
                const commentList = inputElement.closest('.post-comments');
                const commentItem = document.createElement('div');
                commentItem.className = 'comment-item';
                
                // 获取当前用户头像
                const userAvatar = inputElement.previousElementSibling.src;
                
                // 创建评论HTML
                commentItem.innerHTML = `
                    <img src="${userAvatar}" alt="当前用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <h5 class="comment-author">我</h5>
                        <p class="comment-text">${commentText}</p>
                        <div class="comment-actions">
                            <a href="#" class="comment-action reply-to">回复</a>
                            <a href="#" class="comment-action">点赞</a>
                            <span>刚刚</span>
                        </div>
                    </div>
                `;
                
                // 为新评论的回复按钮添加事件监听
                setTimeout(() => {
                    const newReplyLink = commentItem.querySelector('.reply-to');
                    newReplyLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        inputElement.value = '@我 ';
                        inputElement.focus();
                    });
                }, 100);
                
                // 将新评论插入到评论列表顶部
                const firstComment = commentList.querySelector('.comment-item');
                if (firstComment) {
                    commentList.insertBefore(commentItem, firstComment);
                } else {
                    commentList.insertBefore(commentItem, inputElement.closest('.add-comment'));
                }
                
                // 隐藏"查看更多评论"按钮（如果存在）
                const viewMoreBtn = commentList.querySelector('.view-more-comments');
                if (viewMoreBtn) {
                    viewMoreBtn.style.display = 'none';
                }
                
                // 清空输入框
                inputElement.value = '';
                
                // 更新评论数
                const statItem = commentList.closest('.post-card').querySelector('.stat-item:nth-child(2) span');
                let count = parseInt(statItem.textContent);
                statItem.textContent = `${count + 1} 条评论`;
                
                // 添加评论出现动画
                commentItem.style.opacity = '0';
                commentItem.style.transform = 'translateY(10px)';
                commentItem.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                
                setTimeout(() => {
                    commentItem.style.opacity = '1';
                    commentItem.style.transform = 'translateY(0)';
                }, 10);
            }
            
            // 图片查看功能（模拟）
            const postImages = document.querySelectorAll('.post-image');
            postImages.forEach(image => {
                image.addEventListener('click', function() {
                    // 这里可以实现图片预览功能
                    alert('图片预览功能：' + this.alt);
                });
            });
            
            // 滚动加载动画
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            // 为每个动态卡片添加初始样式和观察器
            const postCards = document.querySelectorAll('.post-card');
            postCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
                observer.observe(card);
            });
        });
    </script>
</body>
</html>
    